 <template>
  <div>
    <!-- 已配置内测用户 -->
    <div class="filter-container">
      <!-- <el-select v-model="courseIndex" @change="changeCourse" placeholder="请选择课程">
        <el-option
          v-for="(item, index) in courseList"
          :key="item.id"
          :label="item.name"
          :value="index"
        ></el-option>
      </el-select>-->
      <el-input
        placeholder="合同甲方/合同乙方"
        v-model="searchData"
        style="width: 200px;"
        class="filter-item"
      />

      <el-button
        class="filter-item add-style"
        type="primary"
        icon="el-icon-search"
        @click="search"
      >搜索</el-button>
    </div>

    <tTable :columns="columns" :data="tableData">
      <!-- 基础提成比例 -->
      <template v-slot:percentage="slotProps">
          <div>{{slotProps.scope.row.percentage * 100}}%</div>
      </template>

      <!-- 操作 -->
      <template v-slot:operate="slotProps">
        <el-button @click="checkDetail(slotProps.scope.$index)" size="small">明细</el-button>
        <el-button
          @click="changeRate(slotProps.scope.row.id, slotProps.scope.row.percentage)"
          type="primary"
          class="add-style"
          size="small"
        >修改</el-button>
      </template>
    </tTable>

    <el-dialog title="修改提成比例" :visible.sync="dialogChangeVisible" width="60%">
      <el-form label-width="200px">
        <el-form-item label="提成比例">
          <el-input
            placeholder="提成比例"
            v-model="rateDate"
            style="width: 200px;"
            class="filter-item"
          />
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button
          class="filter-item"
          style="margin-left: 10px;"
          type="primary"
          @click="changeRateNumber"
          size="mini"
        >确认</el-button>
      </div>
    </el-dialog>

    <Pagination :total="total" @handleChange="handleChange"/>

    <div v-if="tableData.length !== 0">
      <el-dialog
        :title="'邀约公司：' + tableData[checkIndex].conApplyerName"
        :visible.sync="dialogVisible"
        width="60%"
      >
        <div>
          <div>签约课程：{{tableData[checkIndex].courseName}}</div>
          <div>邀请时间：{{tableData[checkIndex].date}}</div>
          <div>基础提成比例：{{tableData[checkIndex].percentage * 100}}%</div>
        </div>
        <hr>
        <div>
          <div>邀约公司联系人：{{tableData[checkIndex].contactsName || "无"}}</div>
          <div>移动电话：{{tableData[checkIndex].contactsPhone || "无"}}</div>
          <div>座机：{{tableData[checkIndex].contactsCellPhone || "无"}}</div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getAllOrg,
  handleContract,
  getOrganization,
  changeContract
} from "api/getData";
import { setTimeout } from "timers";
import Pagination from "src/components/pagination";
import { formatDateTime } from "src/util/time.js";
import tTable from "src/components/table/index.vue";

export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      checkIndex: 0,
      searchData: "", //搜索企业名
      courseList: [], // 筛选的企业
      courseIndex: "", // 选择的企业
      rateDate: "",
      dialogChangeVisible: false,
      currentContractId: -1, // 当前选择的合同

      total: -1,

      columns: [
        {
          attr: { label: "", type: "index", width: "50" }
        },
        {
          attr: { prop: "courseName", label: "签约课程", width: "120" }
        },
        {
          attr: { prop: "conApplyerName", label: "合同甲方" }
        },
        {
          attr: { prop: "conConfirmerName", label: "合同乙方" }
        },
        {
          slot: "percentage",
          attr: { prop: "percentage", label: "基础提成比例", width: "110" }
        },
        {
          attr: { prop: "createTime", label: "发起时间", width: "180" }
        },
        {
          slot: "operate",
          attr: { label: "操作", width: "200" }
        }
      ]
    };
  },
  components: { Pagination, tTable },
  mounted() {
    this.getData(1);
  },
  methods: {
    checkDetail: function(index) {
      this.checkIndex = index;
      this.dialogVisible = true;
    },
    search: function() {
      // if (!this.searchData) return;
      getAllOrg(1, this.searchData).then(res => {
        this.tableData = res.content.map(item => {
          item.createTime = formatDateTime(item.createTime);
          return item;
        });
        this.total = res.totalElements;
      });
    },
    changeRate: function(id, percentage) {
      this.dialogChangeVisible = true;
      this.currentContractId = id;
      this.rateDate = percentage;
    },
    changeRateNumber: function() {
      changeContract(this.currentContractId, this.rateDate).then(() => {
        this.dialogChangeVisible = false;
        this.$message.success("修改成功");
        this.getData(1);
      });
    },
    getData: function(pageNumber) {
      getAllOrg(pageNumber).then(res => {
        this.tableData = res.content.map(item => {
          item.createTime = formatDateTime(item.createTime);
          return item;
        });
        this.total = res.totalElements;
      });
    },
    getCourse: function() {
      getOrganization(pageNumber).then(res => {
        this.tableData = res.content.map(item => {
          item.createTime = formatDateTime(item.createTime);
          return item;
        });
        this.total = res.totalElements;
      });
    },
    handleChange(pageNumber) {
      this.getData(pageNumber);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
</style>
